<template>
  <div style="display: flex;flex-direction: row;flex-wrap: wrap">
    <el-upload
        :id="'multiple-upload-'+refs"
        v-if="multiple"
        :limit="limit"
        :action="uploadUrl"
        :on-success="onSuccess"
        :multiple="multiple"
        :on-exceed="onExceed"
        :before-upload="beforeAvatarUpload"
        :on-preview="review"
        :before-remove="beforeRemove"
        :on-remove="remove"
        :file-list="imageUrl"
        list-type="picture-card">
      <i slot="default" class="el-icon-plus"></i>
    </el-upload>
    <el-upload
        v-else
        :limit="limit"
        :action="uploadUrl"
        :on-success="onSuccess"
        :on-exceed="onExceed"
        :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl.length>0" :src="imageUrl[0]" class="avatar" alt="">
      <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px solid #efefef"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import {randomString} from "@/utils/utils";

export default {
  name: "UploadFile",
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    imageUrl: {
      type: Array,
      default: () => []
    },
    accept: {
      type: Array,
      default: null,
    },
    limit: {
      type: Number,
      default: 1,
    },
    maxSize: {
      type: Number,
      default: 1024 * 1024 * 2
    }
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_UPLOAD_API + '?uploadType=2',
      dialogVisible: false,
      dialogImageUrl: '',
      refs: randomString(5)
    }
  },
  computed: {
    acceptText() {
      return this.accept.join(',');
    },
  },
  emits: ['uploadSuccess', 'remove'],
  watch:{
    imageUrl(){
      this.resetUpload()
    }
  },
  methods: {
    beforeRemove() {
      return this.$confirm('确定删除该图片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    remove(file,list){
      this.resetUpload()
      this.$emit('remove', {file,list});
    },
    resetUpload() {
      if (this.multiple) {
        this.$nextTick(() => {
          if (this.imageUrl.length >= this.limit) {
            document.getElementById('multiple-upload-' + this.refs).children[1].style.display = 'none';
          } else {
            document.getElementById('multiple-upload-' + this.refs).children[1].style.display = 'inline-block';
          }
        })
      }
    },
    review(e) {
      this.dialogVisible = true;
      this.dialogImageUrl = e.url
    },
    onSuccess(e) {
      this.resetUpload()
      this.$emit('uploadSuccess', e);
    },
    onExceed() {
      this.$message.error(`上传数量超过限制，最多只能上传${this.limit}个`)
    },
    beforeAvatarUpload(file) {
      const fileNameArr = file.name.split('.');
      const fileExt = fileNameArr[fileNameArr.length - 1];
      const accept = this.accept === null ? [] : this.accept;
      if (accept.length > 0 && !accept.includes(fileExt)) {
        this.$message.error(`上传文件的格式不允许,只允许上传${this.acceptText}格式`);
        return;
      }
      if (file.size > this.maxSize) {
        this.$message.error(`上传的文件大小超过限制，允许上传${(this.maxSize / 1024 / 1024)}M`);
      }
    },
  },
  mounted() {

  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
